<template>
	<div class="table">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<!-- <el-breadcrumb-item><i class="el-icon-lx-cascades"></i> 订单表格</el-breadcrumb-item> -->
			</el-breadcrumb>
		</div>
		<div class="container">
			<div class="handle-box">
				<el-button type="primary" icon="el-icon-plus" class="mr10" @click="add">添加</el-button>
				<!-- <el-button type="primary" icon="delete" class="handle-del mr10" @click="delAll">批量删除</el-button> -->
                <!-- <el-select v-model="select_cate" placeholder="筛选" class="handle-select mr10">
                </el-select>
                <el-input v-model="select_word" placeholder="筛选关键词" class="handle-input mr10"></el-input>
                <el-button type="primary" icon="search" @click="search">搜索</el-button> -->
            </div>
            <el-table id="out-table" :data="tableData" border class="table" ref="multipleTable" @selection-change="handleSelectionChange">

            	<el-table-column prop="vip_id" label="ID" align="center"  show-overflow-tooltip>
            	</el-table-column>

            	<!-- <el-table-column prop="cate" label="分类" align="center" show-overflow-tooltip>
            	</el-table-column> -->
            	<el-table-column prop="title" label="标题" align="center" show-overflow-tooltip>
            	</el-table-column>
            	<el-table-column prop="name" label="名称" align="center" show-overflow-tooltip>
            	</el-table-column>
            	<el-table-column prop="img" label="卡片图" align="center" width="200">
            		<template slot-scope="scope">
                      <a :href="scope.row.img"><img :src="scope.row.img" alt="" style="height: 100px;"></a>
                  </template>
            	</el-table-column>

            	<el-table-column prop="discount" label="会员折扣" align="center" show-overflow-tooltip>
            	</el-table-column>
            	<el-table-column prop="coupon" label="会员专属优惠" show-overflow-tooltip>
            		<template slot-scope="scope">
            			<div v-for="(item,index) in scope.row.coupon">
            				<div>{{index+1}}.{{item.rule}},{{item.way}} <!-- <span style="color: red;float: right;">*{{item.num ? item.num:1}}</span> --></div>
            			</div>
            		</template>
            	</el-table-column>
            	<el-table-column prop="price" label="售价" align="center" width="150">
            	</el-table-column>
 <!--            	<el-table-column prop="good_rack" label="上下架" align="center">
            	</el-table-column>
            	<el-table-column prop="update_time" label="更新时间" sortable align="center" width="200">
            	</el-table-column> -->
            	<el-table-column fixed='right' label="操作" align="center" width="150">
            		<template slot-scope="scope">
            			<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
            			<!-- <el-button type="text" icon="el-icon-delete" class="red" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
 -->            		</template>
            	</el-table-column>
            </el-table>
            <div class="pagination">
            	<el-pagination background @current-change="handleCurrentChange" layout="prev, pager, next" :total="total">
            	</el-pagination>
            </div>
        </div>

        <!-- 编辑弹出框 -->
        <el-dialog :title="title" :visible.sync="editVisible" width="50%">
        	<el-form ref="form" :model="form" label-width="100px">
        		<!-- <el-form-item label="有效期限">
        			<el-select v-model="form.cate" placeholder="有效期限">
        				<el-option label="15天" value="1"></el-option>
        				<el-option label="一个月" value="2"></el-option>
        			</el-select>
        		</el-form-item> -->
        		<!-- <el-form-item label="卡券标题">
        			<input  v-model="form.">
        		</el-form-item> -->
        		<el-form-item label="卡片标题">
        			 <el-input v-model="form.title" autocomplete="off"></el-input>
        		</el-form-item>
        		<el-form-item label="卡片名称">
        			 <el-input v-model="form.name" autocomplete="off"></el-input>
        		</el-form-item>
        		<el-form-item label="会员卡片">
                   
                   <el-upload
                    class="upload-demo"
                    :action="$gretUrl+'admin/member/upLoad_img'"
                    :on-success="handleUploadSuccess"
                    :on-remove="handleRemoveMain"
                    name="img"
                    multiple
                    :limit="1"
                    :file-list="imgList"
                    list-type="picture">
                    <el-button size="small" type="primary">上传会员卡图片</el-button>
                  </el-upload>
        			
        		</el-form-item>
        		<el-form-item ref="coupon" label="优惠券列表">

        			<div v-for="(i,index) in form.coupon.length" :key="index">
        				<!-- <div v-for="items in form.coupon[index].num"> -->
        					<div>
        						条件
        						<!-- <el-select v-model="form.coupon[index].rule_id" clearable placeholder="请选择"> -->
        							<el-select v-model="form.coupon[index].rule_id" clearable placeholder="请选择" @change="changeRule">
        								<el-option v-for="item in ruleList" :key="item.rule_id" :label="item.rule_name" :value="item.rule_id" :disabled="item.rule_id >= 3 ? true:false">
        								</el-option>
        							</el-select>
        							条件参数
        							<el-input-number v-model="form.coupon[index].rule_fate " :min="0" :precision=" form.coupon[index].rule_id  == 2 ? 2:0" :step="0.5" :disabled=" form.coupon[index].rule_id == 1 || form.coupon[index].rule_id == 3 ? true:false" @blur="showRule" @change="showRule" ></el-input-number>
        						</div>
        						<div>
        							方案
        							<el-select v-model="form.coupon[index].way_id" clearable placeholder="请选择">
        								<el-option v-for="item in wayList" :key="item.way_id" :label="item.way_name" :value="item.way_id"  :disabled="item.way_id == wayList.length ? true:false">
        								</el-option>
        							</el-select>
        							方案参数
        							<el-input-number v-model="form.coupon[index].way_fate" :min="0" :precision="2" :step="0.5" @blur="showWay" @change="showWay"></el-input-number>
        						</div>

						<!-- 数量
							<el-input-number v-model="form.coupon[index].num" :step="1" :min="0"></el-input-number> -->
						<!-- </div> -->
					</div>

					<el-button circle icon="el-icon-plus" style="margin-left: 50%;" @click="createHtml"></el-button>


				</el-form-item>
				<el-form-item label="会员卡折扣">
					<el-input-number v-model="form.discount" :precision="2" :step="0.1" :min="0" :max="9.9"></el-input-number>
				</el-form-item>
				<el-form-item label="价格">
					<el-input-number v-model="form.price" :precision="2" :step="1" :min="0"></el-input-number>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="editVisible = false">取 消</el-button>
				<el-button type="primary" @click="onSubmit">确 定</el-button>
			</span>

		</el-dialog>

		<!-- 删除提示框 -->
		<el-dialog title="提示" :visible.sync="delVisible" width="300px" center>
			<div class="del-dialog-cnt">删除不可恢复，是否确定删除？</div>
			<span slot="footer" class="dialog-footer">
				<el-button @click="delVisible = false">取 消</el-button>
				<el-button type="primary" @click="deleteRow">确 定</el-button>
			</span>
		</el-dialog>
	</div>
</template>
<script>
	export default {
		inject : ['reload'],
		data() {
			return {
				editVisible: false,
				delVisible: false,
				tableData: [],
				admininfo:JSON.parse(localStorage.getItem('ms_username')),
				form: {
					cate:'2',
					img:'',
					discount:'',
					price:'',
					coupon:[
					{
						rule_id:'',
						rule_fate:'',
						way_id:'',
						way_fate:'',
						// num:'',
					}
					],
				},
				ruleList:[],
				wayList:[],
				total:1,
				multipleSelection: [],
				title:'',
				del_list: [],
				cur_page: 1,
				idx: -1,

				imgList:[],
			}
		},
		created(){
			this.init();
			this.getData();
		},
		computed: {
			data() {
				return this.tableData.filter((d) => {
					let is_del = false;
					for (let i = 0; i < this.del_list.length; i++) {
						if (d.cate === this.del_list[i].cate) {
							is_del = true;
							break;
						}
					}
					if (!is_del) {
						if(d.cate.indexOf(this.select_word) > -1 ) {
							return d;
						}
					}
				})
			}
		},
		methods: {
			handleUploadSuccess(res, file) {
              // console.log('img',res)
              if (res.code == 0) {
                this.$message.success('上传成功')
                this.form.img = res.data.src
              }else {
                this.$message.error(res.msg)
              }
            },
            handleRemoveMain(){

            },
			handleCurrentChange(val) {
				this.cur_page = val;
				this.init();
			},
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			init(){
				/*规则数据*/
				this.$axios.get('admin/voucher/rulelist', {
					params:{
						aid: this.admininfo['admin_id'],
						token: this.admininfo['token'],
					}
				}).then((res) => {
					this.ruleList = res.data.data;
				})

				/*方案数据*/
				this.$axios.get('admin/voucher/waylist', {
					params:{
						aid: this.admininfo['admin_id'],
						token: this.admininfo['token'],
					}
				}).then((res) => {
					this.wayList = res.data.data;
				})
			},
			getData(){
				this.$axios.get('admin/member', {
					params:{
						aid: this.admininfo['admin_id'],
						token: this.admininfo['token'],
						page: this.cur_page
					}
				}).then((res) => {
					// console.log(res.data.data.data);
					if(res.data.status == 0){
						this.tableData = res.data.data.data;
						this.total = res.data.data.total 
					}else if(res.data.status == 3){
						this.$router.push('login') 
					}
				})
			},
			createHtml(){
				// console.log(this.$refs.coupon)
				let obj = {
					rule_id:'',
					rule_fate:'',
					way_id:'',
					way_fate:'',
					// num:''
				}
				this.form.coupon.push(obj)
			},
			changeRule(){
				for(var i=0;i<this.ruleList.length;i++){
					if(this.ruleList[i].rule_id == this.form.rule_id){

						this.ruleShow = this.ruleList[i].rule_name;
					}
				}

			},
			showRule(){

				for(var i=0;i<this.ruleList.length;i++){
					if(this.ruleList[i].rule_id == this.form.rule_id){
						var index = new RegExp(this.ruleList[i].r_fate)
						this.ruleShow = this.ruleList[i].rule_name.replace(index,this.form.rule_fate);
					}
				}

			},
			showWay(){

				for(var i=0;i<this.wayList.length;i++){
					if(this.wayList[i].way_id == this.form.way_id){
						var index = new RegExp(this.wayList[i].w_fate)
						this.wayShow = this.wayList[i].way_name.replace(index,this.form.way_fate);
					}
				}

			},
			//添加
			add(){
				this.title = '添加'
				this.editVisible = true
				this.form = {
					cate:'2',
					img:'',
					discount:'',
					price:'',
						coupon:[
						{
							rule_id:'',
							rule_fate:'',
							way_id:'',
							way_fate:'',
							// num:'',
						}
						],
				}
				this.imgList =[]
			},
			//编辑
			handleEdit(index, row){
				// console.log(row);
				this.editVisible = true
				const item = this.tableData[index];
				this.title = "编辑"
				this.form = row;
				// this.form = {
				// 	cate:item.cate,
				// 	img:item.img,
				// 	discount:item.,
				// 	price:'',
				// 	coupon:[
				// 	{
				// 		rule_id:'',
				// 		rule_fate:'',
				// 		way_id:'',
				// 		way_fate:'',
				// 		// num:'',
				// 	},
				// 	],
				// };	
				this.imgList = [{
					name:'jpg',
					url: row.img
				}]
			},
			//保存
			onSubmit() {
				if(this.title == "添加"){
					this.$axios.post("admin/member/create",this.form)
					.then((res) => {
						if(res.data.status == 0){
							this.$message.success(res.data.msg)
							this.editVisible = false
						}else{
							this.$message.error(res.data.msg)
						}
					})
				}else if(this.title == "编辑"){
					if(this.form.cate == "月租卡"){
						this.form.cate = "2"
					}else{
						this.form.cate ="1"
					}
					for(var index in this.form["coupon"]){

						for(var i in this.form["coupon"][index]){

							if(i == "theme_id" || i == "coupon_id" || i == "coupon_uuid" || i == "issue" || i == "rule" || i == "way"){
								delete this.form["coupon"][index][i]
							}
						}
					}
					// for (var i = 0;i <= this.form.coupon.length;i++){
					// 	console.log(this.form.coupon[i])
					// }
					let data = this.form
					console.log(data);
					this.$axios.post("admin/member/upvip",data)
					.then((res) => {
						if(res.data.status == 0){
							this.$message.success(res.data.msg)
							this.editVisible = false
						}else{
							this.$message.error(res.data.msg)
						}
					})
				}
				this.reload();
			},
			//删除
			handleDelete(index, row){
				// console.log(row);
				this.idx = index;
				this.delVisible = true;
			},
			//确定删除
			deleteRow(){
				this.$axios.post("admin/member/del",{vip_id: this.tableData[this.idx].vip_id})
				.then((res) =>{
					if(res.data.status == 0){
						this.$message.success(res.data.msg);
					}else{
						this.$message.error(res.data.msg);
					}
					this.delVisible = false
					this.reload()
				})
			}
		}
	}
</script>
<style scoped>
.handle-box {
	margin-bottom: 20px;
}

.handle-select {
	width: 120px;
}

.handle-input {
	width: 300px;
	display: inline-block;
}
.del-dialog-cnt{
	font-size: 16px;
	text-align: center
}
.table{
	width: 100%;
	font-size: 14px;
}
.red{
	color: #ff0000;
}
/*头像框*/
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	width: 180px;
}
.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}

/*排版*/
.editD{
	display: flex; margin-bottom: 18px;
}
.editDL{
	flex: 0 0 100px;text-align: center;line-height: 32px;
}
.el-checkbox{
	margin: 0 30px 0 0;
}
.el-checkbox+.el-checkbox{
	margin-left: 0; 
}
.good_spec{
	width: 100%;
	overflow: hidden;
	white-space: nowrap;
	text-overflow:ellipsis;
}
</style>
